<template>
  <van-action-sheet v-model="sheetShow" :closeable="false">
    <div class="color-box">
      <div
        class="color-item"
        v-for="i in list"
        :key="i"
        :style="{ backgroundColor: i }"
        @click="selectColor(i)"
      >
        <van-icon
          v-if="i === lineColor"
          name="success"
          size="0.5rem"
          color="#ffffff"
        />
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      list: ["#000000", "#FF4E4E", "#1A81F9", "#53D769", "#FED02F", "#FF8F21"],
    };
  },
  computed: {
    ...mapGetters(["lineColor"]),
    sheetShow: {
      get({ show }) {
        return show;
      },
      set(newVal) {
        this.$emit("update:show", newVal);
      },
    },
  },
  methods: {
    //选择颜色 并给父级发送修改颜色
    selectColor(hex) {
      this.$store.commit("setLineColor", hex);
      this.$emit("update:show", false);
    },
  },
};
</script>

<style lang="less" scoped>
.color-box {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .color-item {
    position: relative;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 0.16rem;

    .van-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>